<template>
	<view>
		<view class="order-address" v-if="addressMsg.length==0">
			<view class="flex align" style="justify-content: center;"
				@click="$toPage('/package/mine/setAddress/setAddress?setNew=true')">
				<image src="https://wx.2024csnl.com/static/goods/order-add.png" mode="aspectFill" class="order-add" />
				<view class="add-address">添加地址</view>
			</view>
		</view>

		<view class="" v-else>
			<view class="flex flex-end box">
				<view class="fl take-type take-left" v-for="(item,i) in freightList" :class="{active: type==i}"
					@click="checkType(i)">{{item.name}}</view>
			</view>
			<!-- 用户地址 -->
			<view class="order-address address-checked" v-if="showAddress()"
				@click="onSkip('/package/mine/myAddress/myAddress?pageType=true')">
				<view class="between align">
					<view class="address-info">{{addressMsg.area}}{{addressMsg.address}}</view>
					<image src="https://wx.2024csnl.com/static/goods/into-black.png" mode="aspectFill" class="into" />
				</view>
				<view class="info">
					<text>{{addressMsg.name}}</text>
					<text>{{addressMsg.tel}}</text>
				</view>
			</view>
			<!-- 商家地址 -->
			<view v-if="showMerchantAddress('merchant')">
				<view class="order-address address-checked" @click="open('popup')">
					<view class="between align">
						<view class="address-info">{{getVal.name}}</view>
						<image src="https://wx.2024csnl.com/static//home/home-dw.png" mode="aspectFill" class="into"
							style="width: 30rpx;height: 30rpx;"
							@click.stop="openMap(freightList[type].storedata[current].longitude,freightList[type].storedata[current].latitude,freightList[type].storedata[current].name)" />
					</view>
					<view class="info">
						<text>{{getVal.address}} </text>
						<text>{{getVal.tel}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="order-address address-checked" v-if="type==1"
				@click="openMap(freightList[1].storedata[0].longitude,freightList[1].storedata[0].latitude,freightList[1].storedata[0].name)">
				<view class="between align">
					<view class="address-info">{{freightList[1].storedata[0].name}}</view>
					<image src="https://wx.2024csnl.com/static/goods/into-black.png" mode="aspectFill" class="into" />
				</view>
				<view class="info">
					<text>{{freightList[1].storedata[0].address}} </text>
					<text>{{freightList[1].storedata[0].tel}}</text>
				</view>
			</view> -->
		</view>
		<!-- v-if="proData.product" -->
		<view class="order-infobox" v-if="product">
			<view class="order-info flex">
				<image :src="product.pic" mode="aspectFill" class="order-goods-img" />
				<view class="fl between column">
					<view class="font-l goods-name">{{product.name}}</view>
					<view class="goods-gg">规格：{{guige.name}}</view>
					<view class="between align">
						<view class="goods-gg">x{{orderMsg.num}}</view>
						<view class="order-goods-price c-red"><text class="price-util">￥</text>{{payMoney}}</view>
					</view>
				</view>
			</view>
			<view class="" v-if="freightList.length!=0">
				<view class="between align order-info">
					<view class="">运费</view>
					<view class="">￥{{freightList[type].freight_price}}</view>
				</view>
				<view class="between align order-info">
					<view class="">订单备注</view>
					<view class="flex align">
						<input type="text" v-model="remark" class="discount input-box" placeholder="请先和商家协商一致"
							placeholder-class="p-c">
						<image src="https://wx.2024csnl.com/static/goods/into.png" mode="aspectFill" class="into" />
					</view>
				</view>
			</view>
		</view>

		<view style="display: block;height: 98rpx;" />

		<view class="pay-box between align">
			<view class="">
				<text>待支付：</text>
				<text class="c-red">￥{{payMoney}}</text>
			</view>
			<view class="pay-now" @click="onSetSubmitOrder">立即支付</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popBox">
				<view class="titBox flex-center">
					选择自提地址
				</view>
				<view class="listBigBox">
					<radio-group style="font-size: 27rpx;color: #333;margin: 20rpx;" @change="radioChange"
						v-for="(item,i) in popupAddress">
						<label class="select between">
							<view style="line-height: 45rpx;">
								<view class="">
									{{item.name}}
								</view>
								<view>{{item.address}}</view>
								<view>{{item.tel}}</view>
							</view>
							<radio :value="item.id.toString()" :checked="current==i" color="#41644A" />
						</label>
					</radio-group>
				</view>
		
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		busGroupPlaceOrder,
		setSubmitOrder,
		getPayType,
		busGroupBookingOrderDetails
	} from "@/api/index.js"
	export default {
		data() {
			return {
					current: 0,
				orderMsg: {
					num: 1, //购买数量
					proid: '', //商品id
					ggid: '', //规格id
				},

				product: {},
				guige: {},
				remark: '',
				addressMsg: {},
				type: 0, //配送方式
				freightList: [], //配送方式列表
				proData: [],
				payMoney: '', //待支付金额
				allbuydata: {}, //订单详情
				payorderid: null, //提交订单后获取的id
				pageType: ''
			}
		},
		async onShow() {
			// 选取地址
			uni.$on('selectAddress', async (data) => {
				this.addressMsg = data
			})
			// 监听是否刷新
			uni.$on('refresh', async (data) => {
				const{proid,num,ggid}=this.orderMsg
				this.getBusGroupBookingOrderDetails(proid,num,ggid)
			})
		},
		computed: {
			popupAddress() {
				return this.freightList?. [this.type]?.storedata
			},
			getVal() {
				return this.freightList?. [this.type]?.storedata?. [this.current] || {}
			},
		},
		beforeDestroy() {
			uni.$off('selectAddress');
		},
		onLoad(opt) {
			this.orderMsg = {
				num: opt.num,
				proid: opt.proid,
				ggid: opt.ggid,
				teamid: opt.teamid,
				buytype: opt.buytype
			}
			this.getBusGroupBookingOrderDetails(opt.proid, opt.num, opt.ggid)
		},
		methods: {
			radioChange(e) {
				let list = this.freightList?. [this.type]?.storedata
				list.forEach((item, i) => {
					if (item.id == e.detail.value) {
						this.current = i;
					}
				})
				this.close('popup')
			},
			// 是否显示商家地址
			showMerchantAddress() {
				return this.freightList[this.type]?.name != '商家配送'
			},
			// 是否显示用户地址
			showAddress() {
				return this.freightList[this.type]?.name != '到店自提'
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			// 提交订单
			async onSetSubmitOrder() {
				if (this.addressMsg.length == 0) {
					this.showToast('收货地址不能为空')
					return
				}
				const {
					id,
					name,
					tel
				} = this.addressMsg
				const {
					proid,
					ggid,
					num,
					teamid,
					buytype
				} = this.orderMsg
				let storeId
				// console.log(this.freightList)
				if (this.freightList[0].name == '到店自提') {
					storeId = this.freightList[0]?.storedata[this.current].id
				}
				if (this.freightList[0].name == '商家配送') {
					storeId = ''
				}
				if (this.freightList.length > 1) {
					storeId = this.freightList[1].storedata[this.current].id
				}
				// console.log(storeId,"storeid")
				const res = await busGroupPlaceOrder('s=/ApiCollage/createOrder', {
					formdata: {
						form0: this.remark
					},
					addressid: id,
					tel: tel,
					linkman: name,
					proid: proid,
					ggid: ggid,
					num: num,
					teamid: teamid,
					buytype: buytype,
					freightid: this.freightList[this.type].id,
					storeid:storeId
				})
				const {
					payorderid,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.payorderid = payorderid
					this.onGetPayType()
				} else {
					this.showToast(msg)
				}
				// console.log(res.data, "立即支付---")
			},
			// 订单信息
			async getBusGroupBookingOrderDetails(proid, num, ggid) {
				const res = await busGroupBookingOrderDetails(
					`s=/ApiCollage/buy&proid=${proid}&num=${num}&ggid=${ggid}`)
				const {
					address,
					product,
					guige,
					product_price,
					freightList,
					status,
					msg
				} = res.data
				// console.log(res, "立即购买")
				if (status == 1) {
					this.freightList = freightList
					this.payMoney = guige.sell_price
					this.guige = guige
					this.product = product
					this.addressMsg = address
				} else {
					this.showToast(msg)
				}
			},
			// 支付方式
			async onGetPayType() {
				const res = await getPayType('s=/ApiPay/pay', {
					orderid: this.payorderid,
					thisurl: '',
					tourl: '',
					scene: 1001
				})
				// console.log(res, "res----***")
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					const {
						money,
						// orderid
						id,
					} = data.payorder
					this.onSkip(`/business/pages/business_tab/orderPay?money=${money}&orderId=${id}`)
				} else {
					this.showToast(msg)
				}
			},

			openMap(lon, lat, name) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					scale: 15,
					name: name
				})
			},
			checkType(i) {
				this.type = i
			}
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.p-c {
		color: #B3B3B3;
	}
</style>

<style lang="scss" scoped>
	.popBox {
		padding: 40rpx 50rpx;
		font-size: 30rpx;
		background: #fff;
		border-radius: 40rpx 40rpx 0px 0px;
	
		.listBigBox {
			max-height: 30vh;
			overflow: auto;
	
			.select {
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1px solid #F5F5F5;
	
				image {
					width: 65rpx;
					height: 65rpx;
					margin-right: 33rpx;
				}
	
			}
		}
	
		.listBigBox::-webkit-scrollbar {
			display: none;
		}
	
		.rightGoIconBox {
			image {
				width: 17rpx;
				height: 30rpx;
			}
		}
	
	
	
		.titBox {
			position: relative;
	
			image {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				right: 0;
				top: 0;
	
			}
		}
	}
	.order-address {
		margin: 20rpx;
		background: #FFF;
		border-radius: 20rpx;
		padding: 18rpx 20rpx;
		padding-bottom: 4rpx;
		min-height: 160rpx;

		.address-info {
			font-size: 29rpx;
			width: 580rpx;
		}

		.info {
			color: #999999;
			font-size: 27rpx;
			margin: 20rpx 0;
		}

		.order-add {
			width: 32rpx;
			height: 32rpx;
			margin-right: 15rpx;
		}

		.add-address {
			color: #41644A;
			line-height: 160rpx;
			text-align: center;
		}
	}

	.box {
		margin: 20rpx;
		margin-bottom: 0;
		border-radius: 20rpx 20rpx 0 0;

		.take-type {
			font-size: 27rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #FFF4D1;
		}

		.take-left {
			border-radius: 20rpx 0 20rpx 0;
		}

		.take-right {
			border-radius: 0 20rpx 0 0;
		}

		.active {
			background-color: #FFF;
			padding-top: 15rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.address-checked {
		margin-top: 0;
		border-radius: 0 0 20rpx 20rpx;
	}

	.order-infobox {
		margin: 20rpx;
		background: #FFF;
		border-radius: 20rpx;
		padding: 30rpx;
		font-size: 27rpx;

		.order-goods-shop {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}

		.order-icon {
			width: 30rpx;
			height: 26rpx;
			margin-right: 20rpx;
		}

		.order-info {
			margin-top: 30rpx;

			.order-goods-img {
				width: 133rpx;
				height: 133rpx;
				margin-right: 25rpx;
				background-color: #B3B3B3;
				border-radius: 10rpx;
			}

			.goods-name {
				font-size: 29rpx;
			}

			.goods-gg {
				color: #B3B3B3;
			}

			.order-goods-price {
				font-size: 29rpx;

				.price-util {
					font-size: 24rpx;
				}
			}

			.order-card {
				background: #F8F8F8;
				padding: 20rpx;
				min-width: 248rpx;
				border-radius: 13rpx;
				border: 1rpx solid #F8F8F8;

				.order-value {
					color: #999999;
					font-size: 21rpx;
					margin-bottom: 21rpx;
				}
			}

			.active {
				border: 1rpx solid #27D1DC;
			}
		}

		.discount {
			margin-right: 16rpx;
		}

		.input-box {
			font-size: 27rpx;
			text-align: right;
		}

		.order-check {
			width: 34rpx;
			height: 34rpx;
		}


	}

	.pay-box {
		font-size: 27rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		padding-left: 27rpx;
		background-color: #FFF;

		.c-red {
			font-size: 33rpx;
		}

		.pay-now {
			font-size: 32rpx;
			background-color: #41644A;
			color: #FFF;
			line-height: 98rpx;
			padding: 0 32rpx;
		}
	}
</style>
